<?php

use kartik\file\FileInput;
$this->title = 'BootStrap Modal';
?>
<style type="text/css">
    .ocr_line {width: 100%;display:block;}
</style>

<div class="site-index">

    <div class="jumbotron">
        <h2><?= $this->title ?></h2>

    </div>

    <div class="body-content">

        <div class="container">
			<!-- Button trigger modal -->
			<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
				Launch demo modal
			</button>

			<!-- Modal -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">Modal title</h4>
						</div>
						<div class="modal-body">
							<?php
								echo FileInput::widget([
									//'model' => $model,
									'name' =>  'image',
									'attribute' => 'attachment_1',
									'options' => ['multiple' => true],
			 			    		'pluginOptions' => [
			 			    			'showCaption' => false,
			 			    			'showRemove' => true,
			 			    			'showUpload' => false,
			 			    			'browseClass' => 'btn btn-success',
			 			    			'removeClass' => 'btn btn-danger',
			 			    			'browseLabel' =>  '上传身份证或户口照片',
			 			    			'removeLabel' =>  '删除'
			 			    		]
								]);
							?>


						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
						</div>
					</div>
				</div>
			</div>
        </div>

    </div>
</div>


<?php app\components\JsBlock::begin() ?>
<script>
    
        window.Tesseract = Tesseract.create({
            //workerPath: '/path/to/worker.js',
            langPath: 'https://cdn.rawgit.com/naptha/tessdata/gh-pages/3.02/chi_sim.traineddata.gz',
            corePath: 'https://cdn.rawgit.com/naptha/tesseract.js-core/0.1.0/index.js',
        });

        // if we know our image is of spanish words without the letter 'e':
         //"/img/ocr/1.jpg"; //$("#img").val();
        var myImage = $("#img").attr("src"); //"/img/ocr/ocr1.jpg";

        Tesseract.recognize(myImage, {
            lang: 'chi_sim',
            tessedit_char_blacklist: 'e'
        }).progress(function(pro) {
                console.log('progress',pro.status);
                $("#progress").append("<p>"+pro.status+"</p>");
          })
          .then(function(result){
                $("#content").append(result.html);
          })
            
       // Tesseract.recognize(myImage)
       // .progress(
       //     message => console.log(message)
       // )
       // .catch(
       //     err => console.error(err)
       // )
       // .then(
       //     result => console.log(result)
       // )
       // .finally(
       //     resultOrError => console.log(resultOrError)
       // )


</script>
<?php app\components\JsBlock::end() ?>
